<template>
  <div class="pdf-viewer">
    <div :id="pdfId" />
  </div>
</template>

<script>
import Pdfh5 from 'pdfh5';
import 'pdfh5/css/pdfh5.css';

export default {
  props: {
    pdfUrl: {
      type: String,
      default: ''
    },
    pdfId: {
      type: String,
      default: 'pdf'
    }
  },
  data() {
    return {
      pdfViewer: null
    }
  },
  watch: {
    pdfUrl() {
      if (this.pdfUrl !== '') {
        this.createPdf()
      }
    }
  },
  mounted() {
    if (this.pdfUrl !== '') {
      this.createPdf()
    }
  },
  methods: {
    /**创建pdf视图 */
    createPdf() {
      this.pdfViewer = new Pdfh5(`#${this.pdfId}`, { pdfurl: this.pdfUrl, goto: 1 });
      // 监听pdf加载完成事件，加载失败、渲染成功都会触发
      this.pdfViewer.on('complete', (status, msg, time) => {
        console.log('状态:' + status + '，信息:' + msg + '，耗时:' + time + '毫秒')
      });
    },
  }
}
</script>


<style lang="scss" scoped>
.pdf-viewer{
  width: 100%;
  height: 100%;
}
</style>